<template>
  <div class="purchase-order-form-page">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-content">
        <div class="nav-left">
          <h1 class="nav-title">
            <span class="title-icon">{{ isEdit ? '✏️' : (isCopy ? '📋' : '➕') }}</span>
            {{ isEdit ? '编辑采购订单' : (isCopy ? '复制采购订单' : '新增采购订单') }}
          </h1>
        </div>
        <div class="nav-right">
          <div class="nav-actions">
            <el-button @click="goBack">返回列表</el-button>
            <el-button type="primary" @click="saveOrder" :loading="saving">
              {{ isEdit ? '更新' : '保存' }}
            </el-button>
            <el-button v-if="!isEdit" type="success" @click="saveAndSubmit" :loading="saving">
              保存并提交
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        size="default"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">
            <span class="title-icon">📋</span>
            基本信息
          </div>
          <div class="section-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="订单号" prop="orderNumber">
                  <el-input 
                    v-model="form.orderNumber" 
                    placeholder="系统自动生成"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单主题" prop="subject">
                  <el-input 
                    v-model="form.subject" 
                    placeholder="请输入订单主题"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="订单类型" prop="orderType">
                  <el-select v-model="form.orderType" placeholder="请选择订单类型" style="width: 100%">
                    <el-option
                      v-for="type in orderTypeOptions"
                      :key="type.value"
                      :label="type.label"
                      :value="type.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计到货日期" prop="expectedArrivalDate">
                  <el-date-picker
                    v-model="form.expectedArrivalDate"
                    type="date"
                    placeholder="选择到货日期"
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="优先级" prop="priority">
                  <el-select v-model="form.priority" placeholder="请选择优先级" style="width: 100%">
                    <el-option label="低" value="低" />
                    <el-option label="中" value="中" />
                    <el-option label="高" value="高" />
                    <el-option label="紧急" value="紧急" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计交货日期" prop="expectedDeliveryDate">
                  <el-date-picker
                    v-model="form.expectedDeliveryDate"
                    type="date"
                    placeholder="选择交货日期"
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 供应商信息 -->
        <div class="form-section">
          <div class="section-title">
            <span class="title-icon">🏢</span>
            供应商信息
          </div>
          <div class="section-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="供应商" prop="supplierId">
                  <el-select
                    v-model="form.supplierId"
                    placeholder="请选择供应商"
                    style="width: 100%"
                    filterable
                    remote
                    :remote-method="searchSuppliers"
                    :loading="loadingSuppliers"
                    @change="handleSupplierChange"
                  >
                    <el-option
                      v-for="supplier in suppliers"
                      :key="supplier.id"
                      :label="supplier.name"
                      :value="supplier.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人" prop="supplierContact">
                  <el-input v-model="form.supplierContact" placeholder="联系人姓名" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="联系电话" prop="supplierPhone">
                  <el-input v-model="form.supplierPhone" placeholder="联系电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电子邮箱" prop="supplierEmail">
                  <el-input v-model="form.supplierEmail" placeholder="电子邮箱" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="供应商地址" prop="supplierAddress">
              <el-input v-model="form.supplierAddress" placeholder="供应商地址" />
            </el-form-item>
          </div>
        </div>

        <!-- 关联信息 -->
        <div class="form-section">
          <div class="section-title">
            <span class="title-icon">🔗</span>
            关联信息
          </div>
          <div class="section-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="关联销售订单" prop="salesOrderId">
                  <el-select
                    v-model="form.salesOrderId"
                    placeholder="请选择销售订单"
                    style="width: 100%"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="order in salesOrders"
                      :key="order.id"
                      :label="`${order.orderNumber} - ${order.customerName}`"
                      :value="order.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关联请购单" prop="requisitionId">
                  <el-select
                    v-model="form.requisitionId"
                    placeholder="请选择请购单"
                    style="width: 100%"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="req in requisitions"
                      :key="req.id"
                      :label="`${req.requisitionNumber} - ${req.applicant}`"
                      :value="req.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 采购明细 -->
        <div class="form-section">
          <div class="section-title">
            <span class="title-icon">📦</span>
            采购明细
            <div class="title-actions">
              <el-button size="small" type="primary" @click="addItem">
                添加明细
              </el-button>
            </div>
          </div>
          <div class="section-content">
            <el-table :data="form.items" border style="width: 100%">
              <el-table-column type="index" label="序号" width="60" />
              <el-table-column label="物料名称" width="200">
                <template #default="{ row, $index }">
                  <el-select
                    v-model="row.materialId"
                    placeholder="选择物料"
                    filterable
                    @change="handleMaterialChange(row, $index)"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="material in materials"
                      :key="material.id"
                      :label="material.name"
                      :value="material.id"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="规格型号" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.specification" placeholder="规格型号" />
                </template>
              </el-table-column>
              <el-table-column label="单位" width="80">
                <template #default="{ row }">
                  <span>{{ row.unit }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" width="120">
                <template #default="{ row }">
                  <el-input-number
                    v-model="row.quantity"
                    :min="0"
                    :precision="2"
                    @change="calculateItemAmount(row)"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="单价" width="120">
                <template #default="{ row }">
                  <el-input-number
                    v-model="row.unitPrice"
                    :min="0"
                    :precision="2"
                    @change="calculateItemAmount(row)"
                    style="width: 100%"
                  />
                </template>
              </el-table-column>
              <el-table-column label="金额" width="120">
                <template #default="{ row }">
                  <span class="amount">¥{{ formatCurrency(row.totalAmount || row.amount || 0) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" min-width="150">
                <template #default="{ row }">
                  <el-input v-model="row.remarks" placeholder="备注" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template #default="{ $index }">
                  <el-button
                    size="small"
                    type="danger"
                    @click="removeItem($index)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 汇总信息 -->
            <div class="summary-info">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="summary-item">
                    <span class="label">总数量：</span>
                    <span class="value">{{ totalQuantity }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="summary-item">
                    <span class="label">总金额：</span>
                    <span class="value amount">¥{{ formatCurrency(totalAmount) }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="summary-item">
                    <span class="label">明细项数：</span>
                    <span class="value">{{ form.items?.length || 0 }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>

        <!-- 附加信息 -->
        <div class="form-section">
          <div class="section-title">
            <span class="title-icon">📝</span>
            附加信息
          </div>
          <div class="section-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="付款方式" prop="paymentMethod">
                  <el-select v-model="form.paymentMethod" placeholder="请选择付款方式" style="width: 100%">
                    <el-option label="现金" value="现金" />
                    <el-option label="银行转账" value="银行转账" />
                    <el-option label="支票" value="支票" />
                    <el-option label="信用证" value="信用证" />
                    <el-option label="承兑汇票" value="承兑汇票" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="付款条件" prop="paymentTerms">
                  <el-input v-model="form.paymentTerms" placeholder="如：30天内付款" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="运输方式" prop="shippingMethod">
                  <el-select v-model="form.shippingMethod" placeholder="请选择运输方式" style="width: 100%">
                    <el-option label="自提" value="自提" />
                    <el-option label="物流配送" value="物流配送" />
                    <el-option label="快递" value="快递" />
                    <el-option label="专车运输" value="专车运输" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="交货地址" prop="deliveryAddress">
                  <el-input v-model="form.deliveryAddress" placeholder="交货地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注说明" prop="remarks">
              <el-input
                v-model="form.remarks"
                type="textarea"
                :rows="4"
                placeholder="请输入备注说明..."
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { usePurchaseOrderStore } from '@/stores/purchaseOrder'
import type { PurchaseOrderDto, PurchaseOrderExtendedDto, PurchaseOrderItemDto } from '@/types/console'

// 路由
const route = useRoute()
const router = useRouter()

// 状态管理
const purchaseOrderStore = usePurchaseOrderStore()

// 表单引用
const formRef = ref<FormInstance>()

// 响应式数据
const saving = ref(false)
const loadingSuppliers = ref(false)
const suppliers = ref<any[]>([])
const salesOrders = ref<any[]>([])
const requisitions = ref<any[]>([])
const materials = ref<any[]>([])

// 判断是否为编辑模式
const isEdit = computed(() => route.params.id !== undefined)
const orderId = computed(() => Number(route.params.id))
// 判断是否为复制模式
const isCopy = computed(() => route.query.copy !== undefined)
const copyFromId = computed(() => Number(route.query.copy))

// 表单数据 - 使用扩展类型以支持完整的订单数据
const form = reactive<Partial<PurchaseOrderExtendedDto>>({
  orderNumber: '',
  subject: '',
  orderType: '',
  priority: '中',
  expectedDeliveryDate: '',
  expectedArrivalDate: '',
  supplierId: 0,
  supplierName: '',
  supplierContact: '',
  supplierPhone: '',
  supplierEmail: '',
  supplierAddress: '',
  salesOrderId: undefined,
  requisitionId: undefined,
  paymentMethod: '',
  paymentTerms: '',
  shippingMethod: '',
  deliveryAddress: '',
  remarks: '',
  items: [],
  totalAmount: 0
})

// 计算属性
const totalQuantity = computed(() => {
  return form.items?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0
})

const totalAmount = computed(() => {
  return form.items?.reduce((sum, item) => sum + (item.totalAmount || item.amount || 0), 0) || 0
})

// 订单类型选项
const orderTypeOptions = [
  { label: '标准采购', value: '标准采购' },
  { label: '紧急采购', value: '紧急采购' },
  { label: '框架采购', value: '框架采购' },
  { label: '补充采购', value: '补充采购' }
]

// 表单验证规则
const rules = {
  subject: [{ required: true, message: '请输入订单主题', trigger: 'blur' }],
  orderType: [{ required: true, message: '请选择订单类型', trigger: 'change' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  expectedArrivalDate: [{ required: true, message: '请选择预计到货日期', trigger: 'change' }],
  supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }]
}

// 生命周期
onMounted(async () => {
  await loadBasicData()
  if (isEdit.value) {
    await loadOrderData()
  } else if (isCopy.value) {
    await loadCopyData()
  } else {
    generateOrderNumber()
  }
})

// 方法
const loadBasicData = async () => {
  try {
    // 加载基础数据：供应商、销售订单、请购单、物料等
    // 这里使用模拟数据，实际项目中应该调用相应的API
    suppliers.value = [
      { id: 1, name: '供应商A', contact: '张三', phone: '13800138001' },
      { id: 2, name: '供应商B', contact: '李四', phone: '13800138002' }
    ]
    
    salesOrders.value = [
      { id: 1, orderNumber: 'SO2025001', customerName: '客户A' },
      { id: 2, orderNumber: 'SO2025002', customerName: '客户B' },
      { id: 3, orderNumber: 'SO2025003', customerName: '客户C' },
      { id: 4, orderNumber: 'SO2025004', customerName: '客户D' }
    ]
    
    requisitions.value = [
      { id: 1, requisitionNumber: 'RQ2025001', applicant: '申请人A' },
      { id: 2, requisitionNumber: 'RQ2025002', applicant: '申请人B' },
      { id: 3, requisitionNumber: 'RQ2025003', applicant: '申请人C' },
      { id: 4, requisitionNumber: 'RQ2025004', applicant: '申请人D' }
    ]
    
    materials.value = [
      { id: 1, name: '钢材', unit: 'kg', specification: 'Q235' },
      { id: 2, name: '电机', unit: '台', specification: '380V' },
      { id: 3, name: '轴承', unit: '个', specification: '6205' }
    ]
  } catch (error) {
    ElMessage.error('加载基础数据失败')
  }
}

const loadOrderData = async () => {
  try {
    console.log('开始加载订单数据，订单ID:', orderId.value)
    // 使用扩展详情API来获取完整的订单数据，包括明细、附加信息等
    const result = await purchaseOrderStore.getPurchaseOrderExtendedDetail(orderId.value)
    console.log('API返回结果:', result)
    if (result.code === 200 && result.data) {
      console.log('订单数据:', result.data)
      const orderData = result.data
      
      // 映射字段名，将API返回的字段名映射到表单字段名
      Object.assign(form, {
        ...orderData,
        salesOrderId: orderData.relatedSalesOrderId,
        salesOrderNumber: orderData.relatedSalesOrderNumber,
        requisitionId: orderData.relatedRequisitionIds?.[0], // 取数组的第一个值
        items: orderData.items || [] // 确保采购明细正确映射
      })
      
      console.log('表单数据已更新:', form)
      console.log('采购明细数据:', form.items)
      console.log('关联销售订单ID:', form.salesOrderId, '订单号:', form.salesOrderNumber)
      console.log('关联请购单ID:', form.requisitionId)
      
      // 重新计算每个明细项的金额，确保数据一致性
      if (form.items) {
        form.items.forEach(item => {
          calculateItemAmount(item)
        })
      }
      
      console.log('计算后总金额:', form.totalAmount)
    } else {
      console.error('加载失败，返回码:', result.code, '消息:', result.msg)
      ElMessage.error(result.msg || '加载订单数据失败')
      goBack()
    }
  } catch (error) {
    console.error('加载订单数据异常:', error)
    ElMessage.error('加载订单数据失败')
    goBack()
  }
}

const loadCopyData = async () => {
  try {
    const result = await purchaseOrderStore.getPurchaseOrderExtendedDetail(copyFromId.value)
    if (result.code === 200 && result.data) {
      const order = result.data
      // 复制订单数据，但重置一些字段
      Object.assign(form, {
        ...order,
        id: undefined,
        orderNumber: '', // 清空订单号，让系统重新生成
        status: '草稿',
        createTime: undefined,
        updateTime: undefined,
        subject: `${order.subject}_复制`,
        salesOrderId: order.relatedSalesOrderId,
        salesOrderNumber: order.relatedSalesOrderNumber,
        requisitionId: order.relatedRequisitionIds?.[0],
        items: order.items?.map(item => ({
          ...item,
          id: 0 // 重置明细ID
        })) || []
      })
      generateOrderNumber()
      ElMessage.success('订单数据复制成功')
    } else {
      ElMessage.error(result.msg || '加载复制订单数据失败')
      generateOrderNumber()
    }
  } catch (error) {
    ElMessage.error('加载复制订单数据失败')
    generateOrderNumber()
  }
}

const generateOrderNumber = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0')
  form.orderNumber = `PO${year}${month}${day}${random}`
}

const searchSuppliers = (query: string) => {
  if (!query) return
  loadingSuppliers.value = true
  // 模拟搜索供应商
  setTimeout(() => {
    suppliers.value = suppliers.value.filter(s => 
      s.name.toLowerCase().includes(query.toLowerCase())
    )
    loadingSuppliers.value = false
  }, 300)
}

const handleSupplierChange = (supplierId: number) => {
  const supplier = suppliers.value.find(s => s.id === supplierId)
  if (supplier) {
    form.supplierName = supplier.name
    form.supplierContact = supplier.contact
    form.supplierPhone = supplier.phone
  }
}

const addItem = () => {
  const newItem: PurchaseOrderItemDto = {
    id: 0,
    materialId: 0,
    materialName: '',
    specification: '',
    unit: '',
    quantity: 1,
    unitPrice: 0,
    totalAmount: 0,
    amount: 0, // 兼容性
    remarks: ''
  }
  form.items = form.items || []
  form.items.push(newItem)
}

const removeItem = (index: number) => {
  form.items?.splice(index, 1)
  calculateTotalAmount()
}

const handleMaterialChange = (row: PurchaseOrderItemDto, index: number) => {
  const material = materials.value.find(m => m.id === row.materialId)
  if (material) {
    row.materialName = material.name
    row.unit = material.unit
    row.specification = material.specification
  }
}

const calculateItemAmount = (row: PurchaseOrderItemDto) => {
  const amount = (row.quantity || 0) * (row.unitPrice || 0)
  row.totalAmount = amount
  row.amount = amount // 兼容性
  calculateTotalAmount()
}

const calculateTotalAmount = () => {
  form.totalAmount = totalAmount.value
}

const validateForm = async (): Promise<boolean> => {
  if (!formRef.value) return false
  
  try {
    await formRef.value.validate()
    
    // 验证明细
    if (!form.items || form.items.length === 0) {
      ElMessage.error('请至少添加一项采购明细')
      return false
    }
    
    for (const item of form.items) {
      if (!item.materialId) {
        ElMessage.error('请选择物料')
        return false
      }
      if (!item.quantity || item.quantity <= 0) {
        ElMessage.error('请输入正确的数量')
        return false
      }
      if (!item.unitPrice || item.unitPrice <= 0) {
        ElMessage.error('请输入正确的单价')
        return false
      }
    }
    
    return true
  } catch (error) {
    return false
  }
}

const saveOrder = async () => {
  if (!(await validateForm())) return
  
  saving.value = true
  try {
    calculateTotalAmount()
      
    // 提交数据，PurchaseOrderDto使用的字段名和表单一致，无需映射
    const submitData = { ...form }
    
    if (isEdit.value) {
      await purchaseOrderStore.updatePurchaseOrder(submitData as PurchaseOrderDto)
      ElMessage.success('更新成功')
    } else {
      await purchaseOrderStore.createPurchaseOrder(submitData as PurchaseOrderDto)
      ElMessage.success('保存成功')
    }
    
    goBack()
  } catch (error) {
    ElMessage.error(isEdit.value ? '更新失败' : '保存失败')
  } finally {
    saving.value = false
  }
}

const saveAndSubmit = async () => {
  if (!(await validateForm())) return
  
  try {
    await ElMessageBox.confirm('确认保存并提交审批？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    saving.value = true
    calculateTotalAmount()
    
    // 提交数据，PurchaseOrderDto使用的字段名和表单一致，无需映射
    const submitData = { ...form }
    
    const result = await purchaseOrderStore.createPurchaseOrder(submitData as PurchaseOrderDto)
    if (result.code === 200 && result.data?.id) {
      await purchaseOrderStore.submitForApproval(result.data.id)
      ElMessage.success('保存并提交成功')
      goBack()
    } else {
      ElMessage.error(result.msg || '操作失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  } finally {
    saving.value = false
  }
}

const goBack = () => {
  router.push('/main/procurement/purchase-order')
}

// 工具方法
const formatCurrency = (amount: number) => {
  return amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
</script>

<style scoped>
.purchase-order-form-page {
  min-height: 100vh;
  background: #ffffff;
  position: relative;
}

.top-navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left .nav-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.title-icon {
  font-size: 1.8rem;
}

.nav-actions {
  display: flex;
  gap: 0.5rem;
}

.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.form-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-title {
  background: linear-gradient(45deg, #409eff, #1890ff);
  color: white;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title .title-icon {
  font-size: 1.3rem;
  margin-right: 0.5rem;
}

.title-actions {
  display: flex;
  gap: 0.5rem;
}

.section-content {
  padding: 1.5rem;
}

.summary-info {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.summary-item {
  text-align: center;
  padding: 0.5rem;
}

.summary-item .label {
  font-size: 0.9rem;
  color: #666;
  display: block;
  margin-bottom: 0.25rem;
}

.summary-item .value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.amount {
  color: #67c23a;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-content {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .main-content {
    padding: 1rem;
  }

  .nav-actions {
    width: 100%;
    justify-content: center;
  }

  .section-title {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
</style> 